<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script  th:src="@{/js/jquery-1.11.3.min.js}"></script>
<script  th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/util.js}"></script>
<script  type="text/javascript" th:src="@{/js/wangEditor.min.js}"></script>


<body>


<form class="layui-form" action="" id="goodsForm">

    <div style="display: flex">
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="name"   class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price"   class="layui-input" lay-verify="required|number">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="inventory"   class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-inline">
                    <select  lay-filter="goodstype" id="goodstype" name="tno" >
                        <option th:value="${t.tno}" th:each="t:${alltype}" th:text="${t.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-inline">
                    <img  style="width: 188px;height: 200px" id="previewImg">
                    <input type="file" name="pic" id="pic" style="display:none">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="padding-left: 30px">
                    <button type="button" class="layui-btn"  lay-submit lay-filter="goodsForm" >立即提交</button>
                </div>
            </div>
        </div>
        <div style="margin-right: 90px;margin-top: 60px">
            <label style="text-align: center">商品详情</label>
            <div id="div1">
                <!--            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>-->
            </div>
        </div>
        <input type="hidden" name="detail" id="detail"/>
    </div>

</form>

</body>
<script type="text/javascript" th:inline="javascript">

    $(function(){

            var E = window.wangEditor;
            var editor = new E('#div1');
            editor.config.uploadImgShowBase64 =true;
            editor.config.uploadImgParamsWithUrl=true;
            // 或者 const editor = new E( document.getElementById('div1') )
            editor.create();

            layui.use('form', function(){
                var form = layui.form;

                $("#previewImg").click(function(){
                    $("#pic").click()

                })

                $("#pic").change(function (){
                    let file=this.files[0];
                    imgPreview(file,$("#previewImg")[0]);

                })

                form.on('submit(goodsForm)',function(data){

                    let text=editor.txt.html();
                    $("#detail").val(text);
                    console.log(data.elem);
                    console.log(data.form);
                    console.log(data.field);

                    let formData =new FormData(data.form);



                    $.ajax({
                        url: '/seller/goods/add',
                        contentType: false,
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        success: function(res){
                            if(res.res){
                                layer.msg(res.msg)
                            }
                        },

                        type: 'post',
                    })


                })

                form.render();
            });
        })

    function imgPreview(file,imgDom){
        if (window.FileReader){
            var reader =new FileReader();
        }else{
            alert("设备不支持图片预览功能");
        }
        var imageType=/^image\//;
        if(!imageType.test(file.type)){
            alert("请选择图片");
            return;
        }
        reader.onload=function(e){

            imgDom.src=e.target.result;
        }
        reader.readAsDataURL(file);
    }


</script>

</html>